<template>
  <section>
    <el-form label-width="80px">
      <el-form-item label="标题">
        <el-input size="mini" v-model="examineDefine.title" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="报告">
        <el-switch v-model="examineDefine.needReportTemplate" active-text="需要" inactive-text="不需要" />
        <div v-if="examineDefine.needReportTemplate">
          <el-select clearable v-model="examineDefine.reportTemplateId" :filterable="true" remote clearable
                     :reserve-keyword="false" default-first-option  placeholder="请输入关键词"
                     :remote-method="remoteMethod" size="mini">
            <el-option v-for="reportTemplate in reportTemplateList" :key="reportTemplate.id" :label="reportTemplate.title" :value="reportTemplate.id">
            </el-option>
            <!--<el-pagination mini layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>-->
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="项目">
        <sel-items :selItems="examineDefine.examineDefineItems" v-on:selItem="selItem"></sel-items>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import selItems from '../examineType/selType'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "editExamineDefine",
    props:['examineDefine'],
    components:{selItems},
    data(){
      return{
        reportTemplateList:null,
        totalPage:0,
        searchKey:null,
        defineForm:{}
      }
    },
    created(){
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.remoteMethod(this.searchKey,val-1)
      },
      remoteMethod(keywords,pageNo) {
        this.searchKey=keywords
        if(keywords === '' || !keywords){//关键词为空或没有输入
          this.reportTemplateList=[]
          return
        }
        this.fetch({name:"getReportTemplateList",data:{keywords,page:pageNo?pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log('看下数量---------',res)
            this.reportTemplateList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveBtn(){
        console.log('看下体检定义--------',this.examineDefine)
        // return
        let data={
          title:this.examineDefine.title,
          departmentId: this.department.id,
          needReportTemplate:this.examineDefine.needReportTemplate,
          examineDefineItems:JSON.stringify(this.examineDefine.examineDefineItems)
        }
        if(this.examineDefine.needReportTemplate){
          console.log('不应该到这里')
          if(this.examineDefine.reportTemplateId === undefined){
            this.$message({type:'error',message:'请选择报告模板！'})
            return
          }
          data.reportTemplateId=this.examineDefine.reportTemplateId
        }
        if(this.examineDefine.id){
          data.id=this.examineDefine.id
          this.updateDefine(data)
        }else this.createdDefine(data)
      },
      createdDefine(data){
        this.fetch({name:"createExamineDefine",data})
          .then(res=>{
            console.log('创建成功---------',res)
            this.$emit('success')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateDefine(data){
        this.fetch({name:"updateExamineDefine",data})
          .then(res=>{
            console.log('更新成功---------',res)
            this.$emit('success')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selItem(e){
        console.log('有传两个么？？？',e)
        //判断体检定义有无id
        //无id，直接操作examineDefineItems
        let index =this.examineDefine.examineDefineItems.findIndex(i=>i.data.instanceId === e.type.data.instanceId)
        if(!this.examineDefine.id){
          this.handleExamineDefineItems(e,index)
        }else {
          this.makeExamineDefineItems(e,index)
        }
      },
      handleExamineDefineItems(e,index){
        let data={title:e.type.name,data:e.type.data}
        if(e.event){
          this.examineDefine.examineDefineItems.push(data)
        }else {
          if(index <0) this.$message({type:'error',message:'没有该项目，请确认。'})
          else this.examineDefine.examineDefineItems.splice(index,1)
        }
      },
      makeExamineDefineItems(e,index){
        let data={title:e.type.name,data:e.type.data, examineDefineId:this.examineDefine.id}
        if(e.event){
          this.createExamineDefineItem(data)
        }else {
          console.log('删除')
          let currItems=this.examineDefine.examineDefineItems[index]
          if(index<0 || !currItems.id) this.$message({type:'error',message:'没有该项目，请确认。'})
          else {
            this.examineDefine.examineDefineItems.splice(index,1)
            this.$confirm('确认删除？')
              .then(()=> {
                this.deleteExamineDefineItem(currItems.id)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
                this.examineDefine.examineDefineItems.push(currItems)
              })
          }
        }
      },
      createExamineDefineItem(data){
        this.fetch({name:"createExamineDefineItem",data})
          .then(res=>{
            this.$message({type:'success',message:'成功！'})
            this.examineDefine.examineDefineItems.push(res)
            console.log('创建成功---------',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      deleteExamineDefineItem(id){
        console.log('看一哈-------',this.examineDefine.examineDefineItems)
        this.fetch({name:"deleteExamineDefineItem",data:{id}})
          .then(res=>{
            this.$message({type:'success',message:'删除成功！'})
            console.log('删除成功---------',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
